<template>
    <el-dialog title="上传内容到知识库" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="4vh" :before-close="beforeClose" :close-on-click-modal="false">
        <div class="dialogVue">
            <div class="flex">
                <div class="uploadBtn flex_1" :class="{active: current===1}" @click="changeCurrent(1)" style="border-radius: 5px 0 0 5px;">文本</div>
                <div class="uploadBtn flex_1" :class="{active: current===2}" @click="changeCurrent(2)">图片</div>
                <div class="uploadBtn flex_1" :class="{active: current===3}" @click="changeCurrent(3)">视频</div>
                <div class="uploadBtn flex_1" :class="{active: current===4}" @click="changeCurrent(4)">文档</div>
                <div class="uploadBtn flex_1" :class="{active: current===5}" @click="changeCurrent(5)" style="border-radius: 0 5px 5px 0;">链接</div>
            </div>

            <div class="innerVue" ref="question">
                <template v-if="current===1">
                    <div class="inpVue">
                        <div class="label">关联问题</div>
                        <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                            <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                            <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                            <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                        </div>
                    </div>
                    <div class="inpVue">
                        <div class="label">答案</div>
                        <textarea v-model="answer" :maxlength="1000" placeholder="请输入问题答案"></textarea>
                    </div>
                </template>
                <template v-if="current===2">
                    <div class="inpVue">
                        <div class="label">选择图片文件</div>
                        <div class="upload relative text_center" v-if="imgFiles.length<3">
                            <span class="el-icon-loading" v-if="isLoading" style="font-size: 20px; line-height: 100px;"></span>
                            <img src="../../../assets/add.png" style="width: 24px; height: 24px;" class="absolute_auto" v-else>
                            <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".png, .jpg, .jpeg" @change="imgfileChange($event)"/>
                        </div>
                        <div class="fileList margin10 flex" v-if="imgFiles.length>0">
                            <div class="file relative" v-for="(o, i) in imgFiles" :key="i" style="max-width: 33.3333%; padding-right: 30px;">
                                <div class="line-1" style="color: #AAA; line-height: 40px;">{{ o.name }}</div>
                                <div class="el-icon-close" @click="removeFun(o, 1)" style="position: absolute; right: 10px;  top: 50%; transform: translateY(-50%); cursor: pointer; color: #AAA;"></div>
                            </div>
                        </div>
                        <div class="inpVue">
                            <div class="label">图片内容概述</div>
                            <textarea v-model="describetion" :maxlength="1000" placeholder="请输入图片内容概述, 帮助AI学习训练"></textarea>
                        </div>
                        <div class="inpVue">
                            <div class="label">关联问题</div>
                            <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                                <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                                <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                                <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current===3">
                    <div class="inpVue">
                        <div class="label">选择视频文件</div>
                        <div class="upload relative text_center" v-if="videoFiles.length<3">
                            <span class="el-icon-loading" v-if="isLoading" style="font-size: 20px; line-height: 100px;"></span>
                            <img src="../../../assets/add.png" style="width: 24px; height: 24px;" class="absolute_auto" v-else>
                            <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".mp4" @change="videofileChange($event)"/>
                        </div>
                        <div class="fileList margin10 flex" v-if="videoFiles.length>0">
                            <div class="file relative" v-for="(o, i) in videoFiles" :key="i" style="max-width: 33.3333%; padding-right: 30px;">
                                <div class="line-1" style="color: #AAA; line-height: 40px;">{{ o.name }}</div>
                                <div class="el-icon-close" @click="removeFun(o, 2)" style="position: absolute; right: 10px;  top: 50%; transform: translateY(-50%); cursor: pointer; color: #AAA;"></div>
                            </div>
                        </div>
                        <div class="inpVue">
                            <div class="label">视频内容概述</div>
                            <textarea v-model="describetion" :maxlength="1000" placeholder="请输入视频内容概述, 帮助AI学习训练"></textarea>
                        </div>
                        <div class="inpVue">
                            <div class="label">关联问题</div>
                            <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                                <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                                <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                                <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current===4">
                    <div class="inpVue">
                        <div class="label">选择文档</div>
                        <div class="upload relative text_center" v-if="pdfFiles.length<3">
                            <span class="el-icon-loading" v-if="isLoading" style="font-size: 20px; line-height: 100px;"></span>
                            <img src="../../../assets/add.png" style="width: 24px; height: 24px;" class="absolute_auto" v-else>
                            <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".pdf, .xlsx, .docx" @change="pdffileChange($event)"/>
                        </div>
                        <div class="fileList margin10 flex" v-if="pdfFiles.length>0">
                            <div class="file relative" v-for="(o, i) in pdfFiles" :key="i" style="max-width: 33.3333%; padding-right: 30px;">
                                <div class="line-1" style="color: #AAA; line-height: 40px;">{{ o.name }}</div>
                                <div class="el-icon-close" @click="removeFun(o, 3)" style="position: absolute; right: 10px;  top: 50%; transform: translateY(-50%); cursor: pointer; color: #AAA;"></div>
                            </div>
                        </div>
                        <div class="inpVue">
                            <div class="label">文档内容概述</div>
                            <textarea v-model="describetion" :maxlength="1000" placeholder="请输入视频内容概述, 帮助AI学习训练"></textarea>
                        </div>
                        <div class="inpVue">
                            <div class="label">关联问题</div>
                            <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                                <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                                <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                                <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current===5">
                    <div class="inpVue">
                        <div class="label">链接</div>
                        <el-input placeholder="请输入您要上传到知识库的链接" style="margin-top: 10px;" v-model="link"></el-input>
                    </div>
                    <div class="inpVue">
                        <div class="label">链接内容概述</div>
                        <textarea v-model="describetion" :maxlength="1000" placeholder="请输入链接内容概述, 帮助AI学习训练"></textarea>
                    </div>
                    <div class="inpVue">
                        <div class="label">关联问题</div>
                        <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                            <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                            <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                            <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                        </div>
                    </div>
                </template>
            </div>
            <div class="btnVue flex_center">
                <div class="cancel" @click="beforeClose">取消</div>
                <div style="width: 20px;"></div>
                <div class="btn" @click="submit">
                    <span class="el-icon-loading" v-if="loading"></span>
                    <span v-else>确认</span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { toast } from "@/common/tools"
import { post } from "@/common/request"
import { urlReg } from "@/common/verification"
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            current: 1,
            describetion: "",
            questions: [""],
            answer: "",
            link: "",
            imgFiles: [],
            imgs: [],
            videoFiles: [],
            videos: [],
            pdfFiles: [],
            pdfs: [],
            loading: false,
            isLoading: false,
            value: true
        }
    },
    methods: {
        beforeClose(){
            this.link = ""
            this.current = 1
            this.describetion = ""
            this.questions = [""]
            this.radio = 1
            this.answer = ""
            this.imgFiles = []
            this.imgs = []
            this.videoFiles = []
            this.videos = []
            this.pdfFiles = []
            this.pdfs = []
            this.value = true
            this.$emit("beforeClose")
        },

        // 滑动到聊天最底部
        scrollToBottom(){
            this.$nextTick(()=>{
                let dom = this.$refs.question
                console.log(dom)
                dom.scrollTo({ top: dom.scrollHeight, behavior: 'smooth' });
            })
        },

        addQuestion(){
            this.questions.unshift("")
            this.scrollToBottom()
        },

        removeQuestion(index){
            this.questions = this.questions.slice(0, index).concat(this.questions.slice(index + 1));
        },

        download(url){
            window.open(url)
        },

        changeCurrent(e){
            this.current = e
            this.questions = [""]
        },

        removeFun(o, index){
            switch(index){
                case 1: 
                    this.imgFiles = this.imgFiles.filter(ver=>{
                        return ver.size != o.size && ver.lastModified != o.lastModified
                    })
                break;
                case 2: 
                    this.videoFiles = this.videoFiles.filter(ver=>{
                        return ver.size != o.size && ver.lastModified != o.lastModified
                    })
                break;
                case 3: 
                    this.pdfFiles = this.pdfFiles.filter(ver=>{
                        return ver.size != o.size && ver.lastModified != o.lastModified
                    })
                break;
            }
        },

        imgfileChange(e){
            let file = e.target.files[0];
            if(!file.name.endsWith("jpg") && !file.name.endsWith("png") && !file.name.endsWith("jepg")) return toast(1, "图片仅支持.jpg、.png、.jepg文件")
            if (file.size > 100 * 1024 * 1024) {
                toast(1, "上传的图片大小不超过100M")
                if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
                return 
            }
            let formData = new FormData()
            formData.append("file", file)
            if(this.isLoading) return
            this.isLoading = true
            post("/front/search/uploadImage", formData).then(res=>{
                this.isLoading = false
                if(res.data.code===0) {
                    this.imgFiles.unshift(file)
                    this.imgs.push(res.data.obj)
                }else{
                    toast(1, "上传失败，请稍后重试")
                }
            })
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        videofileChange(e){
            let file = e.target.files[0];
            if(!file.name.endsWith("mp4")) return toast(1, "视频仅支持.mp4文件")
            if (file.size > 25 * 1024 * 1024) {
                toast(1, "上传的视频文件大小不超过25M")
                if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
                return 
            }
            let formData = new FormData()
            formData.append("file", file)
            if(this.isLoading) return
            this.isLoading = true
            post("/front/search/uploadVideo", formData).then(res=>{
                this.isLoading = false
                if(res.data.code===0) {
                    this.videoFiles.unshift(file)
                    this.videos.push(res.data.obj)
                }else{
                    toast(1, "上传失败，请稍后重试")
                }
            })
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        pdffileChange(e){
            let file = e.target.files[0];
            if(!file.name.endsWith("pdf") && !file.name.endsWith("xlsx") && !file.name.endsWith("docx")) return toast(1, "视频仅支持.pdf、.xlsx、docx文件")
            if (file.size > 100 * 1024 * 1024) {
                toast(1, "上传的文件大小不超过100M")
                if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
                return 
            }
            let formData = new FormData()
            formData.append("file", file)
            if(this.isLoading) return
            this.isLoading = true
            post("/front/search/uploadFile", formData).then(res=>{
                this.isLoading = false
                if(res.data.code===0) {
                    this.pdfFiles.unshift(file)
                    this.pdfs.push(res.data.obj)
                }else{
                    toast(1, "上传失败，请稍后重试")
                }
            })
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        // 提交
        submit(){
            for(let i=0; i<this.questions.length; i++) {
                if(!this.questions[i]) return toast(1, "请输入问题")
            }
            switch(this.current){
                // 文本
                case 1:
                    if(!this.answer) return toast(1, "请输入答案") 
                    if(this.loading) return
                    this.loading = true
                    post("/front/dataset/addDatasetContent", {
                        datasetId: this.$route.query.id,
                        type: 1,
                        question: this.questions.join("\n"),
                        answer: this.answer,
                        url: ""
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "添加成功")
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    }) 
                break;

                case 2:
                    if(this.imgs.length===0) return toast(1, "请选择图片文件")
                    if(!this.describetion) return toast(1, "请输入图片概述")
                    if(this.loading) return
                    this.loading = true
                    post("/front/dataset/addDatasetContent", {
                        datasetId: this.$route.query.id,
                        type: 2,
                        question: this.questions.join("\n"),
                        answer: this.describetion,
                        url: this.imgs.join(",")
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "上传成功")
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;

                case 3:
                    if(this.videos.length===0) return toast(1, "请选择视频文件")
                    if(!this.describetion) return toast(1, "请输入视频概述")
                    if(this.loading) return
                    this.loading = true
                    post("/front/dataset/addDatasetContent", {
                        datasetId: this.$route.query.id,
                        type: 2,
                        question: this.questions.join("\n"),
                        answer: this.describetion,
                        url: this.videos.join(",")
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "上传成功")
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;

                case 4:
                    if(this.pdfs.length===0) return toast(1, "请选择文档文件")
                    if(!this.describetion) return toast(1, "请输入视频概述")
                    if(this.loading) return
                    this.loading = true
                    post("/front/dataset/addDatasetContent", {
                        datasetId: this.$route.query.id,
                        type: 2,
                        question: this.questions.join("\n"),
                        answer: this.describetion,
                        url: this.pdfs.join(",")
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "上传成功")
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;
                
                // 链接
                case 5:
                    if(!urlReg(this.link)) return toast(1, "请输入正确的链接")
                    if(!this.describetion) return toast(1, "请输入链接内容概述, 帮助AI学习训练") 
                    if(this.loading) return
                    this.loading = true
                    post("/front/dataset/addDatasetContent", {
                        datasetId: this.$route.query.id,
                        type: 3,
                        question: this.questions.join("\n"),
                        answer: this.describetion,
                        url: this.link
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "添加成功")
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;
            }
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-dialog) {
    width: 700px !important;
    height: 90vh !important;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
}
:deep(.el-dialog__body) {
    padding: 0 20px;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}
.dialogVue {
    width: 100%;
    height: 100%;
    .innerVue {
        width: 100%;
        height: calc(90vh - 164px);
        overflow-y: scroll
    }
    .innerVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .uploadBtn {
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #f5f5f5;
        color: #81868e;
        cursor: pointer;
        // border-radius: 6px;
    }
    .active {
        background: #0147fd;
        color: #fff;
    }
    .tip {
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #f5f5f5;
        color: #81868e;
    }
    .inpVue {
        width: 100%;
        padding-top: 20px;
        .case {
            color: #AAA;
            padding-top: 20px;
            cursor: pointer;
            display: inline-block;
        }
        .case:hover {
            text-decoration: underline;
        }
        .label {
            font-size: 12px;
        }
        .upload {
            width: 100px;
            height: 100px;
            background: #f5f5f5;
            margin-top: 10px;
            cursor: pointer;
            margin-right: 10px;
            .fileBtn {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                cursor: pointer;
                z-index: 98;
                border: none;
                outline: none;
            }
        }
        .fileList {
            width: 100%;
            height: 40px;
            overflow-x: scroll;
            .file {
                height: 40px;
                text-align: center;
                line-height: 40px;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                margin-right: 10px;
                padding: 0 10px;
            }
        }
        .fileList::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        textarea {
            width: 100%;
            height: 100px;
            border: #DCDFE6 1px solid;
            display: block;
            box-sizing: border-box;
            resize: none;
            border-radius: 4px;
            margin-top: 10px;
            font-family: PingFangSC, PingFang SC;
            padding: 10px;
            font-size: 13px;
            line-height: 1.4;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
}
.btnVue {
    width: 100%;
    height: 50px;
    background: #fff;
    margin-top: 10px;
    .cancel,.btn {
        width: 250px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        cursor: pointer;
    }
    .cancel {
        background: #f5f5f5;
    }
    .btn {
        background: #0147fd;
        color: #fff;
        span {
            color: #fff;
        }
    }
}
</style>